<template>
	<view class="cardContent">
		<view class="cardBox">
			<view class="cardBg" id="canvasId" :style="{ color: theme[themeValue].textColor, background: theme[themeValue].bg }">
				<view class="cardTitle" :style="{ background: theme[themeValue].navTBg }">
					<image src="/static/logo.svg" mode="aspectFill"></image>
					<text>文件(F)</text>
					<text>编辑(E)</text>
					<text>选择(S)</text>
					<text>查看(V)</text>
					<text>转到(G)</text>
					<view class="cardTitleRight">
						<text>一</text>
						<text>□</text>
						<!-- <image src="/static/enlarge.svg" mode="aspectFill"></image> -->
						<uni-icons type="closeempty" size="18" :color="theme[themeValue].textColor"></uni-icons>
					</view>
				</view>
				<view class="cardMain">
					<view class="cardLeft" :style="{ background: theme[themeValue].navLBg }">
						<image src="/static/manage.svg" mode="aspectFill"></image>
						<image src="/static/search.png" mode="aspectFill"></image>
						<image src="/static/operate.svg" mode="aspectFill"></image>
					</view>
					<view class="cardRight" :style="{ fontSize: fontSizeValue + 'px' }">
						<view class="cardRightTitle" :style="{ background: theme[themeValue].navMBg }">
							<text>businessCard.json</text>
						</view>
						<view class="bracketsBox">{</view>
						<view class="textBox">
							<text :style="{ color: theme[themeValue].highlightingLeft }">"Name"</text>
							<text>:</text>
							<text :style="{ color: theme[themeValue].highlightingRight }">"{{ formData.name }}"</text>
						</view>
						<view class="textBox">
							<text :style="{ color: theme[themeValue].highlightingLeft }">"Title"</text>
							<text>:</text>
							<text :style="{ color: theme[themeValue].highlightingRight }">"{{ formData.title }}"</text>
						</view>
						<view class="textBox">
							<text :style="{ color: theme[themeValue].highlightingLeft }">"Email"</text>
							<text>:</text>
							<text :style="{ color: theme[themeValue].highlightingRight }">"{{ formData.email }}"</text>
						</view>
						<view class="textBox">
							<text :style="{ color: theme[themeValue].highlightingLeft }">"Link"</text>
							<text>:</text>
							<text :style="{ color: theme[themeValue].highlightingRight }">"{{ formData.link }}"</text>
						</view>
						<view class="bracketsBox">}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cardEdit">
			<view class="cardEditList">
				<text>Name：</text>
				<input type="text" v-model="formData.name" />
			</view>
			<view class="cardEditList">
				<text>Title：</text>
				<input type="text" v-model="formData.title" />
			</view>
			<view class="cardEditList">
				<text>Email：</text>
				<input type="text" v-model="formData.email" />
			</view>
			<view class="cardEditList">
				<text>Link：</text>
				<input type="text" v-model="formData.link" />
			</view>
			<view class="cardEditList">
				<text>Font-size</text>
				<view class="slideBox">
					<slider :value="fontSizeValue" @change="sliderChange" min="10" max="50" show-value />
				</view>
			</view>
			<view class="cardEditList">
				<text>Theme</text>
				<uni-data-select v-model="themeValue" :localdata="selectData" :clear="false"></uni-data-select>
				<button type="primary" @click="exportImg">
					<uni-icons type="cloud-download-filled" size="25" color="#fff"></uni-icons>
					导出图片
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
// 导入
import html2canvas from 'html2canvas';
import { ref, reactive } from 'vue';

const formData = reactive({
	name: 'Mason',
	title: 'Developer',
	email: 'fans_m@163.com',
	link: 'https://mengxyz.com'
});
// 字体相关
const fontSizeValue = ref(16);

// 主题相关
const themeValue = ref(0);
const selectData = reactive([
	{ value: 0, text: 'Dark+' },
	{ value: 1, text: 'Light+' },
	{ value: 2, text: 'One Dark Pro' },
	{ value: 3, text: 'Dracula' },
	{ value: 4, text: 'Monokai' },
	{ value: 5, text: 'Nord' },
	{ value: 6, text: 'Abyss' }
]);
const theme = reactive([
	{
		bg: '#1e1e1e',
		navTBg: '#323233',
		navLBg: '#333333',
		navMBg: '#252526',
		textColor: '#d4d4d4',
		highlightingLeft: '#569cd6',
		highlightingRight: '#dcdcaa'
	},
	{
		bg: '#ffffff',
		navTBg: '#E5E5E5',
		navLBg: '#2C2C2C',
		navMBg: '#F3F3F3',
		textColor: '#000000',
		highlightingLeft: '#0000ff',
		highlightingRight: '#098658'
	},
	{
		bg: '#282C34',
		navTBg: '#282C34',
		navLBg: '#282C34',
		navMBg: '#21252B',
		textColor: '#abb2bf',
		highlightingLeft: '#e5c07b',
		highlightingRight: '#e06c75'
	},
	{
		bg: '#282a36',
		navTBg: '#202120',
		navLBg: '#272822',
		navMBg: '#1E1F1C',
		textColor: '#f8f8f2',
		highlightingLeft: '#ff79c6',
		highlightingRight: '#bd93f9'
	},
	{
		bg: '#272822',
		navTBg: '#323233',
		navLBg: '#333333',
		navMBg: '#252526',
		textColor: '#f8f8f2',
		highlightingLeft: '#fd971f',
		highlightingRight: '#a6e22e'
	},
	{
		bg: '#2e3440',
		navTBg: '#323233',
		navLBg: '#333333',
		navMBg: '#252526',
		textColor: '#d8dee9',
		highlightingLeft: '#81a1c1',
		highlightingRight: '#a3be8c'
	},
	{
		bg: '#000C18',
		navTBg: '#181D29',
		navLBg: '#051336',
		navMBg: '#1C1C2A',
		textColor: '#6688CC',
		highlightingLeft: '#9966B8',
		highlightingRight: '#22AA3C'
	}
]);

function exportImg() {
	let targetDom = document.getElementById('canvasId'); //原本需要截图的div
	// 转换成canvas
	html2canvas(targetDom, {
		allowTaint: true // 是否允许跨域图像污染画布
	}).then(function (canvas) {
		// 设置图片类型及质量
		var pageData = canvas.toDataURL('image/png', 1.0);
		saveFile(pageData.replace('image/png', 'image/octet-stream'), new Date().getTime() + '.png');
	});
}

// 保存路径下载
function saveFile(data, filename) {
	var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
	save_link.href = data;
	save_link.download = filename;
	document.body.appendChild(save_link);
	save_link.click();
	save_link.remove();
}
// 滑块
function sliderChange(e) {
	fontSizeValue.value = e.detail.value;
}
</script>

<style lang="scss" scoped>
.cardContent {
	width: 100%;
	min-height: 100vh;
	background: #faf4fd;
	.cardBox {
		margin: 0 auto;
		padding: 2rem 1rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		.cardBg {
			background: #272822;
			min-width: 504px;
			// height: 288px;
			border-radius: 10px;
			overflow: hidden;
			.cardTitle {
				width: 100%;
				height: 40px;
				// border-bottom: 1px solid #323233;
				display: flex;
				align-items: center;
				image {
					width: 30px;
					height: 30px;
					margin: 0 8px;
				}
				text {
					// color: #fff;
					font-size: 14px;
					margin-right: 8px;
				}
				.cardTitleRight {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: end;
					padding-right: 8px;
					text {
						font-size: 15px;
					}
					// color: #fff;
					image {
						width: 15px;
						height: 15px;
					}
				}
			}
			.cardMain {
				display: flex;
				// height: 320px;
				.cardLeft {
					width: 50px;
					background: #333333;
					display: flex;
					flex-direction: column;
					align-items: center;
					image {
						width: 20px;
						height: 20px;
						margin: 10px 0 10px;
					}
				}
				.cardRight {
					flex: 1;
					font-size: 16px;
					padding-bottom: 20px;
					.cardRightTitle {
						// border-bottom: 1px solid #323233;
						text {
							display: flex;
							height: 35px;
							align-items: center;
							padding: 0 10px;
							// color: #fff;
							font-size: 14px;
							// background: #2d2d2d;
						}
					}
					.bracketsBox {
						// color: #fff;
						padding: 0 10px;
					}
					.textBox {
						padding: 0 10px 0 30px;
						display: flex;
						align-items: center;
						gap: 10px;
						// color: #fff;
						margin: 8px 0;
					}
				}
			}
		}
	}
	.cardEdit {
		max-width: 504px;
		width: 90%;
		margin: 10px auto;
		.cardEditList {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 10px auto;
			text {
				width: 80px;
			}
			input,
			select {
				flex: 1;
				height: 35px;
				border: 1px solid #ddd;
				border-radius: 5px;
				outline-style: none;
				background: #fff;
				padding: 0 5px;
				font-size: 14px;
			}
			.slideBox {
				flex: 1;
			}
			button {
				margin-left: 10px;
				height: 35px;
				line-height: 35px;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					width: 30px;
				}
			}
		}
	}
}
</style>
